<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
		body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
	</style>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=2RQduyjP0k5eQeGSWgj4AONUifr1VlOd"></script>
	<title>添加/删除覆盖物</title>
</head>
<body>




	<div id="allmap"></div>
	<div style="width: 80%;height: 36px;position: absolute;top: 5%;left: 10%;overflow: hidden">
		<input type="text" name="" value="环球都会广场" id="address_input" style="height: 36px;width: 78%;float:left;overflow: hidden">

		<input type="button" name="" value="定位" id="address_button" onclick="show_mark()" style="height: 36px;width: 20%;float:left;overflow: hidden">
	</div>
</body>
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">




	var color = new Array();
	color[0] = '#76A442';
	color[1] = '#F4CE3B';
	color[2] = '#F4CE3B';
	color[3] = '#98DAFC';
	color[4] = '#'+Math.floor(Math.random()*16777215).toString(16);
	color[5] = '#'+Math.floor(Math.random()*16777215).toString(16);
	color[6] = '#'+Math.floor(Math.random()*16777215).toString(16);
	color[7] = '#'+Math.floor(Math.random()*16777215).toString(16);
	color[8] = '#'+Math.floor(Math.random()*16777215).toString(16);
	color[9] = '#'+Math.floor(Math.random()*16777215).toString(16);



	// 百度地图API功能
	var map = new BMap.Map("allmap");
	map.setMapStyle({style:'googlelite'});
	var point = new BMap.Point(113.321655, 23.120726);
	map.centerAndZoom(point, 13);
	<volist name="coordinates" key="k" id="vo">
	var polygon{$k} = new BMap.Polygon([
			<volist name="vo['gps']" id="vos">
			new BMap.Point({$vos.0},{$vos.1}),
	</volist>

	], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.7});
	polygon{$k}.setStrokeStyle("solid");
	polygon{$k}.setStrokeColor("#FFFFFF");
	polygon{$k}.setFillColor(color[{$vo['gps'][0][2]}]);
	polygon{$k}.setFillOpacity(0.7);
	map.addOverlay(polygon{$k});
	</volist>
	map.enableScrollWheelZoom(true);



	function show_mark() {
		var address_input = $("#address_input").val();
		// 创建地址解析器实例

		var myGeo = new BMap.Geocoder();
		// 将地址解析结果显示在地图上,并调整地图视野
		myGeo.getPoint(address_input, function(point){
			if (point) {
				map.centerAndZoom(point, 17);
				var Markers =new BMap.Marker(point)
				Markers.enableDragging();
				map.addOverlay(Markers);


				Markers.addEventListener("dragend",  function(e){
					//图钉拖动事件
					var pt = e.point;
					myGeo.getLocation(pt, function(rs){
						var addComp = rs.addressComponents;
						//console.log(rs);
						$("#address_input").val(addComp.province +  addComp.city + addComp.district + addComp.street +  addComp.streetNumber +"-"+ rs.business);
					});
				});

			}else{
				alert("未能定位到地址");
			}
		}, "广州市");
	}


</script>
</html>

